<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<title>资招推荐</title>
	<link rel="stylesheet" type="text/css" href="../../build/css/base.css"/>
	<link rel="stylesheet" type="text/css" href="../../build/css/style.css">
	<script src="../../build/public/vue.js" charset="utf-8"></script>
	<script src="../../build/public/base.js" charset="utf-8"></script>
	<script src="../../build/js/jquery.min.js"></script>
</head>
<body>
	<div id="container" style="padding-bottom:50px;padding-top:10px;">
		<!-- 搜索 -->
		<div class="search-wrap">
			<input class="search-top" :class="{active:inputFocus}" v-model="inputValue" type="search" @keyup.enter="searchList">
			<p :class="{active:inputFocus}"><span class="iconfont">&#xe601;</span>{{inputText}}</p>
			<button type="button" v-if="inputFocus" @click="searchCancel">取消</button>
			<div class="search-bac" v-if="inputFocus">
				<div class="history-list-wrap">
					<p><span class="iconfont">&#xe627;</span>历史搜索</p>
					<ul>
						<li class="history-list" v-for="item in historyList">
							<i  @click="hisSearch(item.keywords)">{{item.keywords}}</i><span class="iconfont" @click="delKeyWords(item.idStr)">&#xe624;</span>
						</li>
					</ul>
					<a v-if="historyList.length>0" @click="delAllKeyWords">清空搜索记录</a>
				</div>
			</div>
		</div>
		<!--产品列表-->
		<my-top></my-top>
		<!--精选产品-->
		<div class="index-pro index-card">
			<div  v-for="(item,index) in proList">
				<div  class="pro-list pro-list-bank" v-if="item.category === 'BANK_FINANCIAL'">
					<a v-bind:href="item.category | changeUrl(item.fundType,item.idStr)">
						<div class="budge-normal"><span class="iconfont">&#xe641;</span></div>
						<div class="pro-num clear-fix">
							<div class="pro-num-text pro-num-left">
								<b>{{(item.apr).toFixed(2)}}<i>%</i></b>
								<span>预期收益率</span>
							</div>
							<div class="pro-num-text pro-num-right">
								<b class="investment" v-if="item.investmentTerm == 0">--</b>
								<b class="investment" v-else>{{item.investmentTerm}} <i>{{item.investmentTermUnit | formatUnit}}</i></b>
								<span>投资期限</span>
							</div>
						</div>
						<div class="pro-text">
							{{item.name}}
						</div>
					</a>
				</div>
				<div class="pro-list" v-else-if="item.category === 'PUBLIC_FUND'">
					<div v-if="item.fundType === 'MONETARY_FUND'">
						<a v-bind:href="item.category | changeUrl(item.fundType,item.idStr)">
							<!--<a v-bind:href="'product_3_detail.html?idStr='+item.idStr">-->
							<div class="budge-normal">
								<span class="iconfont">&#xe60a;</span>
							</div>
							<div class="pro-public-list-title">
								<b>{{item.product.name}}</b>
							</div>
							<div class="pro-public-list-con">
								<ul class="clear-fix">
									<li class="pro-public-main">
										<span>{{item.copiesBenefit | formatNum('','%')}}</span>
										<i>每万份收益</i>
									</li>
									<li class="pro-public-vice">
										<span>{{item.avgApr | formatNum('+','%')}}</span>
										<i>七日年化收益率</i>
									</li>
								</ul>
							</div>
							<div class="pro-public-list-bottom">
								<ul class="clear-fix">
									<li>
										<span>基金类型</span>
										<i>{{item.fundType | fundType}}</i>
									</li>
								</ul>
							</div>
						</a>
					</div>
					<div v-else>
						<a v-bind:href="item.category | changeUrl(item.fundType,item.idStr)">
							<!--<a v-bind:href="'product_3_detail.html?idStr='+item.idStr">-->
							<div class="budge-normal"><span class="iconfont">&#xe60a;</span></div>
							<div class="pro-public-list-title">
								<b>{{item.product.name}}</b>
							</div>
							<div class="pro-public-list-con">
								<ul class="clear-fix">
									<li class="pro-public-main">
										<!--<span v-if="v.nearThreeMonthApr == 0">&#45;&#45;</span>-->
										<span v-if="!item.nearThreeMonthApr">--</span>
										<span v-else>{{item.nearThreeMonthApr  | formatNum('','%')}}</span>
										<i>近3个月收益</i>
									</li>
									<li class="pro-public-vice">
										<span v-if="!item.nearYearApr">--</span>
										<span v-else>{{item.nearYearApr | formatNum('','%')}}</span>
										<i>近一年收益</i>
									</li>
								</ul>
							</div>
							<div class="pro-public-list-bottom">
								<ul class="clear-fix">
									<li>
										<span>基金类型</span>
										<i>{{item.fundType | fundType}}</i>
									</li>
									<li>
										<span>最新净值</span>
										<i>{{item.todayNetvalue }}</i>
									</li>
								</ul>
							</div>
						</a>
					</div>
				</div>
				<div class="pro-list pro-private-list pro-list-img" v-else-if="item.category === 'INSURANCE'">
					<a v-bind:href="item.category | changeUrl(item.fundType,item.idStr)">
						<div class="budge-normal"><span class="iconfont">&#xe606;</span></div>
						<img src="../../build/images/insurance-list.png" alt="">
					</a>
				</div>
				<div class="pro-list pro-private-list pro-list-img" v-else-if="item.category === 'PRIVATE_EQUITY'">
					<a v-bind:href="item.category | changeUrl(item.fundType,item.idStr)">
						<div class="budge-normal"><span class="iconfont">&#xe609;</span></div>
						<img src="../../build/images/insurance-list.png" alt="">
					</a>
				</div>
			</div>
			<!--  test -->
			<div style="display: none;">
				<div  class="pro-list pro-list-bank">
					<a>
						<div class="budge-normal">
							<span class="iconfont">&#xe641;</span>
						</div>
						<div class="pro-num clear-fix">
							<div class="pro-num-text pro-num-left">
								<b>--<i>%</i></b>
								<span>预期收益率</span>
							</div>
							<div class="pro-num-text pro-num-right">
								<b class="investment">--</b>
								<span>投资期限</span>
							</div>
						</div>
						<div class="pro-text">
							银行理财测试
						</div>
					</a>
				</div>
				<div class="pro-list">
					<div>
						<a>
							<div class="budge-normal">
								<span class="iconfont">&#xe60a;</span>
							</div>
							<div class="pro-public-list-title">
								<b>公募货币</b>
							</div>
							<div class="pro-public-list-con">
								<ul class="clear-fix">
									<li class="pro-public-main">
										<span>--</span>
										<i>每万份收益</i>
									</li>
									<li class="pro-public-vice">
										<span>--</span>
										<i>七日年化收益率</i>
									</li>
								</ul>
							</div>
							<div class="pro-public-list-bottom">
								<ul class="clear-fix">
									<li>
										<span>基金类型</span>
										<i>--</i>
									</li>
								</ul>
							</div>
						</a>
					</div>
				</div>
				<div class="pro-list">
					<div>
						<a >
							<div class="budge-normal">
								<span class="iconfont">&#xe60a;</span>
							</div>
							<div class="pro-public-list-title">
								<b>公募非货币</b>
							</div>
							<div class="pro-public-list-con">
								<ul class="clear-fix">
									<li class="pro-public-main">
										<span>--</span>
										<i>近3个月收益</i>
									</li>
									<li class="pro-public-vice">
										<span>--</span>
										<i>近一年收益</i>
									</li>
								</ul>
							</div>
							<div class="pro-public-list-bottom">
								<ul class="clear-fix">
									<li>
										<span>基金类型</span>
										<i>--</i>
									</li>
									<li>
										<span>最新净值</span>
										<i>--</i>
									</li>
								</ul>
							</div>
						</a>
					</div>
				</div>
				<div class="pro-list pro-private-list pro-list-img">
					<a>
						<div class="budge-normal">
							<span class="iconfont">&#xe606;</span>
						</div>
						<img src="../../build/images/insurance-list.png" alt="">
					</a>
				</div>
				<div class="pro-list pro-private-list pro-list-img">
					<a>
						<div class="budge-normal">
							<span class="iconfont">&#xe609;</span>
						</div>
						<img src="../../build/images/insurance-list.png" alt="">
					</a>
				</div>
			</div>
		</div>
		<!--底栏-->
		 <my-footer></my-footer>
	</div>
<script src="../../build/js/template.js"></script>
<script src="../../build/public/vue-resource.js" charset="utf-8"></script>
<script src="../../build/js/config.js" charset="utf-8"></script>
<script src="../../build/js/common.js" charset="utf-8"></script>
<script type="text/javascript">
var vm = new Vue({
	el:"#container",
	data:{
		proList:[],
		inputText:'大家都在搜：银行理财',
		inputValue:'',
		inputFocus:false,
		historyList:[],
		fundType:''
	},
	mounted:function(){
		this.$nextTick(function(){
			vm.getList();
			vm.init();
		})
	},
	updated:function () {
		this.$nextTick(function () {
			vm.emptyHandle();
		});
	},
	methods:{
		getList:function(){               //获取产品列表
			var url = '/advisor/home/recommended-product/list';
			noParamsGet(url,function(res){
				vm.proList = res.data
			})
		},
		init:function(){                  //搜索初始监听键盘事件
			var searchWrap = document.querySelector('.search-wrap');
			var searchInput = document.querySelector('.search-top');
			var footer = document.querySelector('.footer')
			searchInput.onfocus = function(){
				vm.inputFocus = true;
				vm.inputText = '';
				vm.showKeyWords();
				footer.style.display = 'none';
				searchWrap.style.cssText = 'position:fixed;top:10px;'
			}
			searchInput.onblur = function(){
			}
		},
		searchCancel:function(){          //取消搜索
			var footer = document.querySelector('.footer');
			var searchWrap = document.querySelector('.search-wrap');
			vm.inputFocus = false;
			vm.inputText = '大家都在搜：银行理财';
			vm.inputValue = '';
			footer.style.display = 'block';
			searchWrap.style.cssText = 'position:relative;'
		},
		showKeyWords:function(){
			noParamsGet('/advisor/home/keywords-history',function(res){
				vm.historyList = res.data.slice(0,10);
			})
		},
		delKeyWords:function(idStr){     //删除单个搜索记录
			post('/advisor/home/keywords-history/remove',{
				keywordsHistoryIdStr:idStr
			},function(res){
				vm.showKeyWords();
				toast('已删除')
			})
		},
		delAllKeyWords:function(){       //删除所有搜索记录
			noParamsPost('/advisor/home/keywords-history/clear',function(res){
				vm.showKeyWords();
				toast('已清空')
			})
		},
		searchList:function(){           //发送搜索关键字到搜索页
			console.log(vm.inputValue);
			if(vm.inputValue == ''){
				toast('请输入搜索条件');
				return
			}
			window.location.href = 'search.html?keyWord='+vm.inputValue;
		},
		hisSearch:function(keywords){   //发送点击关键字到搜索页
			vm.inputValue = keywords;
			window.location.href = 'search.html?keyWord='+vm.inputValue;
		},
		emptyHandle:function () {
			var investments = document.getElementsByClassName('investment');
			for(var i = 0; i < investments.length; i++){
				console.log(investments[i].innerText);
				if(investments[i].innerText == '0天'){
					investments[i].innerText = '--';
				}
			}
		},
	},
	filters:{
		changeUrl:function(category,fundType,idStr){
			switch (category) {
				case 'BANK_FINANCIAL':
					return 'product_2_detail.html?idStr='+idStr;
					break;
				case 'PUBLIC_FUND':
					if(fundType == 'MONETARY_FUND'){
						return 'product_3_detail_1.html?idStr='+idStr;
					}
					else{
						return 'product_3_detail.html?idStr='+idStr;
					}
					break;
				case 'INSURANCE':
					return 'product_4_detail.html?idStr='+idStr;
					break;
				case 'PRIVATE_EQUITY':
					return 'product_5_detail.html?idStr='+idStr;
					break;

			}
		}
	}
})
</script>

</body>
</html>
